<template>
  <div style="width: 100%">
    <div :class="['sub_main','reportDetails-'+receivesDate]">
      <h1 style="text-align: center; font-size: 2em">案件分析报告</h1>
      <h2 v-html="getResultItem('basicInformationOfTelecomNetworkFraudCases')"></h2>

      <div v-html="getResultItem('caseFilingAndMassLoss')"></div>
      <p v-html="getResultItem('caseFilingAndLossAmountOfTheMasses')"></p>

      <p v-html="getResultItem('monthlyOverallIncidentTrend')"></p>
      <smLine
        v-if="lineOption1.data.length > 0"
        :data="lineOption1.data"
        :color="lineOption1.color"
        yName="单位：件"
        :chartTitle="{ text: lineOption1.text, x: 'center', y: 'top', textStyle: { fontSize: 22 } }"
        class="chartClass"
      />
      <a-empty v-else description="图形无数据" />
      <div data-op-type="new-page"></div>
      <p v-html="getResultItem('propertyLoss')"></p>
      <a-table :columns="columns" :data-source="tableData" bordered :pagination="false" class="chartClass h_auto" />
    </div>
    <div :class="['sub_main','reportDetails-'+receivesDate]">
      <div v-html="getResultItem('crimeDetectionAndArrestOfSuspect')"></div>
      <p v-html="getResultItem('accordingToEachBranch')"></p>

      <p v-html="getResultItem('monthlyUrbanAreas')"></p>
      <smRankBar
        v-if="lineOption2.data.length > 0"
        :data="lineOption2.data"
        :barWidth="16"
        yName="单位：人"
        :chartTitle="{ text: lineOption2.text, x: 'center', y: 'top', textStyle: { fontSize: 22 } }"
        class="chartClass"
      />
      <a-empty v-else description="图形无数据" />
      <div data-op-type="new-page"></div>
      <div v-html="getResultItem('victimSituation')"></div>

      <p v-html="getResultItem('afterTheCity')"></p>
      <p v-html="getResultItem('propertyLossTrend')"></p>
      <smLine
        v-if="lineOption3.data.length > 0"
        :data="lineOption3.data"
        :color="lineOption3.color"
        yName="单位：万元"
        :chartTitle="{ text: lineOption3.text, x: 'center', y: 'top', textStyle: { fontSize: 22 } }"
        class="chartClass"
      />
      <a-empty v-else description="图形无数据" />
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import * as caseApi from '@/api/modules/case.js'
import smRankBar from '@/components/echarts/smRankBar.vue'
import smLine from '@/components/echarts/smLine.vue'
export default {
  components: {
    smLine,
    smRankBar
  },
  props: ['reportDate'],
  data() {
    return {
      result: {},
      columns: [
        {
          title: '',
          children: [
            {
              title: '单位',
              dataIndex: 'company',
            },
            {
              title: '立案数（起）',
              children: [
                {
                  title: '', //当前年
                  dataIndex: 'numberOfCasesFiledThisYear',
                },
                {
                  title: '', //上一年
                  dataIndex: 'numberOfCasesFiledLastYear',
                },
                {
                  title: '同比',
                  dataIndex: 'casesFiledYearOnYearMoMRatio',
                },
                {
                  title: '环比',
                  dataIndex: 'casesFiledMoMRatio',
                },
              ],
            },
            {
              title: '涉案金额（万元）',
              children: [
                {
                  title: '', //当前年
                  dataIndex: 'amountInvolvedThisYear',
                },
                {
                  title: '', //上一年
                  dataIndex: 'amountInvolvedLastYear',
                },
                {
                  title: '同比',
                  dataIndex: 'yearAmountInvolveddMoMRatio',
                },
                {
                  title: '环比',
                  dataIndex: 'thisAmountInvolveddMoMRatio',
                },
              ],
            },
          ],
        },
      ],
      tableData: [],
      lineOption1: {
        text: null,
        data: [],
        color: ['#6885F2', '#FB8DCF', '#26CED9', '#FD7171', '#FFD54B', '#FF944C'],
      },
      lineOption2: {
        text: null,
        data: [],
      },
      lineOption3: {
        text: null,
        data: [],
        color: ['#6885F2', '#FB8DCF', '#26CED9', '#FD7171', '#FFD54B', '#FF944C'],
      },
    }
  },
  computed: {
    receivesDate() {
      const reportDate = this.$route.query.reportDate
        ? this.$route.query.reportDate
        : this.reportDate
        ? this.reportDate
        : ''
      return reportDate
    },
    // 接收值
    receives() {
      const reportDate = this.receivesDate
      const caseTimeType = 0 //自定义类型
      const startTimeFrame = reportDate + '-01' //moment(reportDate).subtract(1,'month').format('YYYY-MM')+'-01'
      const stopTimeFrame = reportDate + '-31' //moment(reportDate).subtract(1,'month').format('YYYY-MM')+'-31'
      return { caseTimeType, startTimeFrame, stopTimeFrame }
    },
  },
  async created() {
    Promise.all([
      this.getWordsDatas(),
      this.getTheWholeCityDatas(),
      this.getFraudFilingAndPropertyLoss(),
      this.getArrestTheSuspect(),
      this.getLossOfPeopleSProperty()
    ]).then(() => {
      setTimeout(()=>{
        this.$emit('request-ok', {
          date: this.receivesDate,
          success: true
        })
      }, 6000)
    })
  },
  methods: {
    moment,
    // 文本
    async getWordsDatas() {
      try {
        let res = await caseApi.writtenWords(this.receives)
        // .then((res) => {
        if (res.success) {
          this.result = res.result && Object.keys(res.result).length > 0 ? res.result : {}
        } else {
          this.result = {}
        }
        // }).catch((e) => {
        //   this.$message.warn('请求失败！')
        // })
      } catch (err) {
        this.$message.warn('请求失败！')
      }
    },
    // 全市立案情况-图表
    async getTheWholeCityDatas() {
      try {
        let res = await caseApi.caseFilingInTheWholeCity(this.receives)
        if (res.success) {
          let result = res.result && res.result.length > 0 ? res.result : []
          let data =
            result.length > 0
              ? result.map((item) => {
                  return {
                    product: item.date,
                    '数量(件)': item.count,
                  }
                })
              : []
          this.lineOption1.data = data
          this.lineOption1.text = moment(this.receives.startTimeFrame).format('YYYY年M月') + '全市立案情况'
        } else {
          this.lineOption1.data = []
        }
      } catch (err) {
        this.lineOption1.data = []
        this.$message.warn('请求失败！')
      }
    },
    // 全市各区县电信网络诈骗立案和财产损失情况-表格
    async getFraudFilingAndPropertyLoss() {
      // 标题
      this.columns[0].title =
        moment(this.receives.startTimeFrame).format('YYYY年M月') + '全市各区县电信网络诈骗立案和财产损失情况'
      //立案数（起）
      this.columns[0].children[1].children[0].title = moment(this.receives.startTimeFrame).format('YYYY年M月')
      this.columns[0].children[1].children[1].title = moment(this.receives.startTimeFrame)
        .subtract(1, 'year')
        .format('YYYY年M月')
      //涉案金额（万元）
      this.columns[0].children[2].children[0].title = moment(this.receives.startTimeFrame).format('YYYY年M月')
      this.columns[0].children[2].children[1].title = moment(this.receives.startTimeFrame)
        .subtract(1, 'year')
        .format('YYYY年M月')
      try {
        let res = await caseApi.fraudFilingAndPropertyLoss(this.receives)
        if (res.success) {
          let result = res.result && Array.isArray(res.result) && res.result.length > 0 ? res.result : []
          result.forEach((item,index) => {
            item.key = index
            item.casesFiledYearOnYearMoMRatio = item.numberOfCasesFiledYearOnYear.moMRatio //立案数同比
            item.casesFiledMoMRatio = item.monthOnMonthComparisonOfNumberOfCasesFiled.moMRatio //立案数环比
            item.yearAmountInvolveddMoMRatio = item.yearOnYearAmountInvolved.moMRatio //涉案金额同比
            item.thisAmountInvolveddMoMRatio = item.monthOnMonthComparisonOfTheAmountInvolved.moMRatio //涉案金额环比
          })
          this.tableData = result
        } else {
          this.tableData = []
        }
      } catch (err) {
        this.tableData = []
        this.$message.warn('请求失败！')
      }
    },
    // 长春各区县抓获犯罪嫌人情况-图表
    async getArrestTheSuspect() {
      try {
        let res = await caseApi.arrestTheSuspect(this.receives)
        if (res.success) {
          let result = res.result && res.result.length > 0 ? res.result : []
          let data =
            result.length > 0
              ? result.map((item) => {
                  return {
                    product: item.typeName,
                    '数量(人)': item.count,
                  }
                })
              : []
          this.lineOption2.data = data
          this.lineOption2.text =
            moment(this.receives.startTimeFrame).format('YYYY年M月') + '长春各区县抓获犯罪嫌人情况'
        } else {
          this.lineOption2.data = []
        }
      } catch (err) {
        this.lineOption2.data = []
        this.$message.warn('请求失败！')
      }
    },
    // 全市人民财产损失趋势-图表
    async getLossOfPeopleSProperty() {
      try {
        let res = await caseApi.lossOfPeopleSProperty(this.receives)
        if (res.success) {
          let result = res.result && res.result.length > 0 ? res.result : []
          let data =
            result.length > 0
              ? result.map((item) => {
                  return {
                    product: item.date,
                    '数量(万元)': item.countBigDecimal,
                  }
                })
              : []
          this.lineOption3.data = data
          this.lineOption3.text = moment(this.receives.startTimeFrame).format('YYYY年M月') + '全市人民财产损失趋势'
        } else {
          this.lineOption3.data = []
        }
      } catch (err) {
        this.lineOption3.data = []
        this.$message.warn('请求失败！')
      }
    },
    getResultItem(key) {
      let value = ''
      if (Object.keys(this.result).length > 0 && this.result[key]) {
        value = this.result[key]
      }
      return value
    },
  },
}
</script>
<style lang="less" scoped>
p {
  font-size: 14px;
  text-indent: 2em;
  color: rgba(0, 0, 0, 0.8);
}
.chartClass {
  height: 500px;
  padding-top: 50px;
  width: 90%;
  margin: 0 auto !important;
  &.h_auto {
    height: auto;
    padding-bottom: 50px;
  }
}
.sub_main {
  padding: 24px 24px 0 24px;
  width: 100%
}
/deep/.ant-empty {
  padding-bottom: 30px;
}
</style>
